<template>
  <div class="noticeParticulars">
    <el-card shadow="never">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="公告" style="margin-bottom: 20px">
          </el-page-header>
        </div>

        <div class="notice">
          <!--     标题     -->
          <div style="display: flex;justify-content: center;border-bottom: 1px #efefef solid;padding-bottom: 20px">
            <h2 style="font-weight: 500">{{noticeTable.noticeTitle}}</h2>
          </div>
          <div style=" text-indent: 2em">
            <Editor
                style="min-height: 500px; overflow-y: hidden;"
                v-model="noticeTable.noticeContent"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
          </div>

          <div style="display: flex;justify-content: flex-end">
            <span>发布时间（{{ shortTimeChina(noticeTable.annceTime) }}）</span>
          </div>

        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getNoticeById} from "@/api/allApi";
import {Editor} from "@wangeditor/editor-for-vue";
import {shortTime, shortTimeChina} from "../../../../utils/timeFormat";

export default {
  components: {Editor},
  data() {
    return {
      noticeTable: {},
      editor: null,
      editorConfig: {
        placeholder: '请输入内容...',
        readOnly: true
      },
      isDisabled:true,
      mode: 'simple', // or 'simple'
    }
  },
  methods: {
    shortTimeChina,
    shortTime,
    getNoticeById() {
      getNoticeById(this.$route.params.noticeId).then(res => {
        this.noticeTable = res.data.data
      })
    },
    goBack() {
      this.$router.back();
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
  mounted() {
    this.getNoticeById()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="less" scoped>
.noticeParticulars {
  width: 80%;
  margin: 30px auto;
  min-width: 900px;
  flex-wrap: wrap;
  border-radius: 5px;
}
</style>